<template>
  <div class="ivz-options-form">
    <div style="position: relative; margin-bottom: 3px">
      <a-radio-group v-model:value="model[meta.field]" button-style="solid" size="small">
          <a-radio-button value="dict">数据字典</a-radio-button>
          <a-radio-button value="url">url地址</a-radio-button>
      </a-radio-group>
    </div>
    <div v-if="model[meta.field] == 'dict'">
      <a-select v-model:value="model['dictValue']" placeholder="请选择字典类型"
        @change="dictChange" :options="treeData" style="width: 100%" :allowClear="true"/>
    </div>
    <div v-else>
        <a-input v-model:value="model['urlValue']" placeholder="请输入地址(/core/test)" />
    </div>
<!--    <a-modal v-model:visible="visible" title="新增字典" @ok="handleOk">-->
<!--      <p>Some contents...</p>-->
<!--      <p>Some contents...</p>-->
<!--      <p>Some contents...</p>-->
<!--    </a-modal>-->
  </div>
</template>

<script>
  import {ref} from "vue";
  import {BooleanData} from "@/components/OptionsMetaData";
  const testMaps = {
    mentions: [
      {label: '张三', value: '张三'},
      {label: '李四', value: '李四'},
      {label: '王五', value: '王五'},
    ],
    checkbox: [
      {label: '铁观音', value: 'itea'},
      {label: '龙井', value: 'puer'},
    ],
    cascade: [
      {label: '福建', value: 'fujian', children: [
          {label: '厦门', value: 'xiamen'},
          {label: '泉州', value: 'quanzhou'},
          {label: '福州', value: 'fuzhou'},
        ]
      },
      {label: '江苏', value: 'jiangsu', children: []}
    ],
    complete: [
      {value: 'int'},
      {value: 'bigint'},
      {value: 'varchar'},
    ],
    stree: [
      {label: '茶叶', value: 'itea', children: [
          {label: '铁观音', value: 'tie'},
          {label: '龙井', value: 'longing'},
          {label: '毛尖', value: 'maojian'},
        ]
      }
    ],
    select: [
      {label: 'ivzone', value: 'ivzone'},
      {label: 'online', value: 'online'},
      {label: 'iot', value: 'iot'},
    ],
    radio: BooleanData
  }
  export default {
    name: "IvzOptionsForm",
    props: ["meta", "model"],
    setup() {
      let treeData = ref([
        {label: '测试单选框', value: 'radio'},
        {label: '测试提及', value: 'mentions'},
        {label: '测试多选框', value: 'checkbox'},
        {label: '测试下拉框', value: 'select'},
        {label: '测试自动完成', value: 'complete'},
        {label: '测试树型下拉框', value: 'stree'},
        {label: '测试级联选择框', value: 'cascade'}
      ])
      return {treeData, visible: false};
    },
    created() {
      if(import.meta.env.PROD) {
        this.$http.get("/lcd/online/dictType").then(resp => {
          if(resp['code'] == 200) {
            this.treeData = resp.data;
          } else {
            this.$msg.warningMessage(resp['message'])
          }
        }).catch(reason => {
          console.warn(`获取字典类型失败[/lcd/online/dictType]将使用默认值`)
        })
      } else {
        this.model[this.meta.field] = 'dict';
        this.model.dictValue = this.model['type'];
        this.model['options'] = testMaps[this.model['type']];
      }
    },

    methods: {
      dictChange(val) {
        if(import.meta.env.PROD) {

        } else {
          this.model['options'] = testMaps[val];
        }
      },
      handleOk() {

      }
    }
  }
</script>

<style scoped>
    .ivz-options-form {
        /*border-bottom: 1px dashed #afafaf;*/
    }
    .ivz-options-form .ant-input {
        padding: 4px 4px;
    }
    .ivz-options-form .ivz-of-item {
        position: relative;
    }
</style>
